%link{:rel => "stylesheet", :href => "/codemirror/lib/codemirror.css"}
%link{:rel => "stylesheet", :href => "/codemirror/theme/cobalt.css"}
%link{:rel => "stylesheet", :href => "/codemirror/mode/Serpico/Serpico.css"}
%link{:rel => "stylesheet", :href => "/codemirror/addon/fold/foldgutter.css"}

%script{:src => "/codemirror/lib/codemirror.js"}
%script{:src => "/codemirror/mode/Serpico/Serpico.js"}
%script{:src => "/codemirror/addon/fold/foldgutter.js"}
%script{:src => "/codemirror/addon/fold/foldcode.js"}
%script{:src => "/codemirror/addon/fold/indent-fold.js"}

%div{:style => "margin-left: 15%;"}
  %br
  %h3 Error in template
  .table.table-striped{:id => "mytable"}
    - errormessage = @error_message.split("\n")
    %div #{errormessage[0]}
    %div #{errormessage[1]}
    %div #{errormessage[2]}
    %div #{errormessage[3]}

    %h4 Meta Language tree

    %label{ :class => "control-label", :for => "filter_panel" }
      %a{:href=> '#filter_panel', "data-toggle"=>'modal', :class=>'btn btn-info'}
        Filter
    .modal{:id=>'filter_panel', :class=>'modal hide fade', :tabindex=>'-1', :role=>'dialog', "aria-labelledby"=>'modal-label', "aria-hidden"=>'true'}
      .modal-body
        %h3 Filter
        Select the elements you want to display
        %br
        %input{:type => "checkbox", :class => "filter", :name => "condition"} Condition
        %br
        %input{:type => "checkbox", :class => "filter", :name => "loop"} Loop
        %br
        %input{:type => "checkbox", :class => "filter", :name => "choose"} Choose structures
        %br
        %input{:type => "checkbox", :class => "filter", :name => "rowloop"} Row loop
        %br     
        %input{:type => "checkbox", :class => "filter", :name => "variable"} Variable     

    %textarea{:id => "tree"} #{@tree}

    :javascript
      var myCodeMirror = CodeMirror.fromTextArea(document.querySelector("#tree"), {readOnly: true, theme: "cobalt Serpico", lineNumbers: true, foldGutter: true, extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]});
      var tree = document.querySelector("#tree").value
      var filters = document.querySelectorAll(".filter")
      for(var i = 0 ; i<filters.length; i++)
        filters[i].addEventListener("change",applyFilters)
      
      function applyFilters(){
          
          var cb = document.querySelectorAll(".filter")
          var filters = {}
          for(var i = 0 ; i<cb.length; i++){
            filters[cb[i].name] = cb[i].checked
          }
          console.log(filters)
          var newtree = ""
          var lines = tree.split("\n")
          var indent = 0

          var rowloopStarted = false
          var rowloopStartTab = -1

          for(i=0;i<lines.length;i++){
            line = lines[i].trim()
            if(filters['loop']){
              // end of loop
              if(line[0] === "\u2206"){
                indent--
                for(j=0 ; j<indent ; j++)
                  newtree += "\t" 
                newtree += line+ "\n"
              }
              // start of loop (not choose)
              if(line[0] === "\u00AC" && line.indexOf("\u00B5") === -1){
                for(j=0 ; j<indent ; j++)
                  newtree += "\t" 
                newtree += line+ "\n"
                indent++
              }
            }
            if(filters['condition']){
              // start of condition
              if(line[0] === "\u2020"){
                for(j=0 ; j<indent ; j++)
                  newtree += "\t" 
                newtree += line+ "\n"
                indent++
              }
              // end of condition
              if(line[0] === "\u00A5"){
                indent--
                for(j=0 ; j<indent ; j++)
                  newtree += "\t" 
                newtree += line+ "\n"
              }
            }
            if(filters['choose']){
              // start of choose
              if(line.indexOf("\u00B5") !== -1){
                for(j=0 ; j<indent ; j++)
                  newtree += "\t" 
                newtree += line+ "\n"
                indent++
              }
              // elem of choose
              if(line[0] === "\u0192" || line[0] === "\u00F7"){
                for(j=0 ; j<indent ; j++)
                  newtree += "\t" 
                newtree += line+ "\n"
              }
              // end of choose
              if(line[0] === "\u2260" || line[0] === "\u00E5"){
                indent--
                for(j=0 ; j<indent ; j++)
                  newtree += "\t" 
                newtree += line+ "\n"
              }
            }
            if(filters['rowloop']){
              tabs = (lines[i].match(/\t/g) || []).length

              if(rowloopStarted && tabs <= rowloopStartTab){
                indent--
                rowloopStarted = false
              }

              if(line[0] === "\u00E6"){
                for(j=0 ; j<indent ; j++)
                  newtree += "\t" 
                newtree += line+ "\n"
                indent++
                rowloopStarted = true
                rowloopStartTab = tabs
              }
              if(line[0] === "\u221E"){
                for(j=0 ; j<indent ; j++)
                  newtree += "\t" 
                newtree += line+ "\n"
              }

            }
            if(filters['variable']){
              if(line[0] === "\u03A9" || line[0] === "\u00A7" || line[0] === "\u03C0"){
                for(j=0 ; j<indent ; j++)
                  newtree += "\t" 
                newtree += line+ "\n"
              }
            }
          }
          console.log(newtree)
          newtree = newtree.substring(0, newtree.length-1)
          document.querySelector(".CodeMirror").remove()
          document.querySelector("#tree").value = newtree
          CodeMirror.fromTextArea(document.querySelector("#tree"), {readOnly: true, theme: "cobalt Serpico", lineNumbers: true, foldGutter: true, extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]});
      }